<template>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        订单管理
        <small>管理您的订单</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-calendar-minus-o"></i> 订单管理</a></li>
        <li class="active">添加订单</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">添加订单</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <form role="form">
                <!-- text input -->
                <div class="form-group">
                  <label for="orderTime">下单时间</label>
                  <input class="form-control" id="orderTime" type="text" disabled>
                </div>
                <div class="form-group">
                  <label for="orderUser">下单者名称</label>
                  <input class="form-control" placeholder="请输入下单者名称" type="text" id="orderUser">
                </div>
                <div class="form-group">
                  <label for="orderLocation">收货地址</label>
                  <input class="form-control" placeholder="请输入收货地址" type="text" id="orderLocation">
                </div>
                <div class="form-group">
                  <label for="orderPhone">下单者联系电话</label>
                  <input class="form-control" id="orderPhone" placeholder="请输入下单者联系电话" type="number">
                </div>
              </form>
            </div>
            <!-- /.box-body -->
          </div>

          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">添加商品到订单中</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body" id="addProductBlock">
              <div class="row product-input-item" id="item1">
                <div class="col-xs-4">
                  <div class="form-group">
                    <label for="product1">商品1</label>
                    <select class="form-control js-example-basic-single" id="product1">
                    </select>
                  </div>
                </div>
                <div class="col-xs-4">
                  <div class="form-group">
                    <label for="count1">数量</label>
                    <input class="form-control" placeholder="请输入商品数量" type="number" id="count1">
                  </div>
                </div>
                <div class="col-xs-4">
                  <button onclick="deleteProductInput(1)" class="btn btn-danger" style="margin-top: 25px" id="deletebtn1">删除商品</button>
                </div>
              </div>
            </div>

            <!-- /.box-body -->
            <div class="box-footer">
              <button @click="addProductInput" class="btn btn-success">增加商品</button>
              <button @click="add" class="btn btn-primary">提交订单</button>
              <button @click="deleteAllProductInput" class="btn btn-danger pull-right">清空商品</button>
              <div style="margin-top: 20px">
                <p class="alert alert-danger hidden" id="message">message</p>
              </div>
            </div>
          </div>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->

    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">

          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">提示</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            模态框内容..
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>

        </div>
      </div>
    </div>

  </div>
  <!-- /.content-wrapper -->
</template>

<script>
export default {
  name: "addOrder",
  data(){
    var message = document.getElementById("message");
    var i = 2;
    var orderUser = document.getElementById("orderUser");
    var orderLocation = document.getElementById("orderLocation");
    var orderPhone = document.getElementById("orderPhone");
    var data = this.GLOBAL.appData.stockInfo;
    return {
      message,
      i,
      orderUser,
      orderLocation,
      orderPhone,
      data
    }
  },
  created() {
    window.deleteProductInput = this.deleteProductInput;
  },
  mounted() {

    function setFormattedTime() {
      var d = new Date();
      var month = d.getMonth()+1;
      var newMonth = month>9?month:"0"+month;
      var day = d.getDate();
      var newDay = day>9?day:"0"+day;
      var hours =d.getHours();
      var newHours = hours>9?hours:"0"+hours;
      var minutes =d.getMinutes();
      var newMinutes = minutes>9?minutes:"0"+minutes;
      var seconds =d.getSeconds();
      var newSeconds = seconds>9?seconds:"0"+seconds;
      var time = d.getFullYear()+'-'+newMonth+'-'+newDay+' '+newHours+':'+newMinutes+':'+newSeconds;
      $("#orderTime").val(time);
    }

    $('.js-example-basic-single').select2({
      width: "26vw",
      data: this.data
    });

    $(document).ready(function () {
      // 激活导航位置


      setFormattedTime();
      setInterval(()=>{
        setFormattedTime();
      },1000);

      // WYSIHTML5编辑器
      $(".textarea").wysihtml5({
        locale: 'zh-CN'
      });
    });

    $(function () {
      $("#example1").DataTable();
      $('#example2').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false
      });
    });
  },
  methods:{
    addProductInput() {
      var addProductBlock = document.getElementById("addProductBlock");
      var divElement = document.createElement("div");
      divElement.className = "row product-input-item";
      divElement.id = "item"+this.i;
      divElement.innerHTML = "<div class=\"col-xs-4\">\n" +
          "                                <div class=\"form-group\">\n" +
          "                                    <label for=\"product"+this.i+"\">商品"+this.i+"</label>\n" +
          "                                    <select class=\"form-control js-example-basic-single\" id=\"product"+this.i+"\">\n" +
          "                                    </select>\n" +
          "                                </div>\n" +
          "                            </div>\n" +
          "                            <div class=\"col-xs-4\">\n" +
          "                                <div class=\"form-group\">\n" +
          "                                    <label for=\"count"+this.i+"\">数量</label>\n" +
          "                                    <input class=\"form-control\" placeholder=\"请输入商品数量\" type=\"number\" id=\"count"+this.i+"\">\n" +
          "                                </div>\n" +
          "                            </div>\n" +
          "                            <div class=\"col-xs-4\">\n" +
          "                                <button onclick=\"deleteProductInput("+this.i+")\" class=\"btn btn-danger\" style=\"margin-top: 25px\" id=\"deletebtn"+this.i+"\">删除商品</button>\n" +
          "                            </div>";
      this.i++;
      addProductBlock.appendChild(divElement);
      $('.js-example-basic-single').select2({
        width: "26vw",
        data: this.data
      });
      $(".main-sidebar").css("minHeight",document.body.scrollHeight+"px");
    },
    deleteProductInput(index) {
      if(this.i===2){
        $(".modal-body").html("订单必须含有至少一个商品！");
        $("#myModal").modal('show');
        return;
      }
      let elementId = "item"+index;
      $("#"+elementId).remove();
      for(let j=index+1;j<this.i;j++){
        let newIndex=j-1;
        $("#product"+j).prev().attr("for","product"+newIndex);
        $("#product"+j).prev().html("商品"+newIndex);
        $("#count"+j).prev().attr("for","count"+newIndex);
        $("#deletebtn"+j).attr("onclick","deleteProductInput("+newIndex+")");
        $("#item"+j).attr("id","item"+newIndex);
        $("#product"+j).attr("id","product"+newIndex);
        $("#count"+j).attr("id","count"+newIndex);
        $("#deletebtn"+j).attr("id","deletebtn"+newIndex);
      }
      this.i--;
      $(".main-sidebar").css("minHeight",document.body.scrollHeight+"px");

    },
    deleteAllProductInput(){
      $(".product-input-item").remove();
      this.i=1;
      this.addProductInput();
    },
    add() {
      let orderProductList = [];//构造订单物品列表
      let idList = [];//id列表（用于检查是否重复
      var submitFlag = true;//提交标志
      for (let num = 1; num < this.i && submitFlag; num++) {
        let productId = document.getElementById("product" + num).value;
        let count = document.getElementById("count" + num).value;
        if (count === "" && submitFlag) {
          //若有订购数量为空
          this.$message.warning("请输入订购数量");
          submitFlag = false;
        }
        else if (idList.includes(productId) && submitFlag) {
          //若有重复商品
          this.$message.warning("请删除重复商品");
          submitFlag = false;
        }
        else {
          idList.push(productId);
          orderProductList.push({
            "productId": productId,
            "count": count,
          });
        }
      }
      if (submitFlag) {
        this.$message.info("成功添加（模拟操作）");
        this.$router.push("/main/orderData")
      }
    }
  }
}
</script>

<style scoped>

</style>
